<!--
 * @Description: 
 * @version: 
 * @Author: King
 * @Date: 2022-03-03 18:24:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-26 12:03:44
-->
<template>
  <div class="container-navMenu">
    <div class="top-icon">
      <img src="../assets/logo.png" alt="" />
    </div>
    <el-menu
      router
      default-active="this.$route.path"
      class="el-menu-vertical-demo navEvent"
      @open="handleOpen"
      @close="handleClose"
      unique-opened
      background-color="#fff"
      text-color="#000"
      active-text-color="#ffff00"
      style="outline: 1xp solid #000055"
    >
      <template v-for="submenu in menus">
        <!-- 起到给菜单路由划分级别的作用 -->
        <el-submenu :index="submenu.id" :key="submenu.id" >
          <!-- 起到给同一级别菜单路由分组的作用 -->
          <!-- <el-menu-item-group :index="submenu.id" :key="submenu.id"> -->
          <template slot="title"> {{ submenu.title }} </template>
          <template v-for="menu in submenu.children">
            <el-menu-item :index="menu.routerTo" :key="menu.id" class="nav-item">
              {{ menu.title }}
            </el-menu-item>
          </template>
          <!-- </el-menu-item-group> -->
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  // name: 'NavMenu',
  data(){
    return{
      menus: [
      {
        title: "基础数据管理",
        id: "1",
        children: [
          {
            title: "PageOne",
            id: "1-1",
            routerTo: "/routePages/PageOne.vue"
          },
          { title: "PageTwo", id: "1-2" ,routerTo: "/routePages/PageTwo.vue"},
          { title: "播放视频", id: "1-3",routerTo: "/routePages/PageVideo.vue" },
          // { title: "仓库管理", id: "1-4" },
        ],
      },
      {
        title: "导航路由1",
        id: "2",
        children: [
          {
            title: "用户管理",
            id: "2-1",
            // routerTo: "/src/routePages/PageOne.vue",
          },
          { title: "品项管理", id: "2-2" },
          { title: "品项类型管理", id: "2-3" },
          { title: "仓库管理", id: "2-4" },
        ],
      },
    ],
    navFlag: false,
    }
  },
  methods: {
    // pathOne(){
    //   this.$router.push({
    //     path:'../routePages/PageOne.vue'
    //   })
    // },
    handleOpen(e) {
      console.log(e,'open')
      // if(aria-expanded){

      // }
    },
    handleClose() {
      console.log('close')
    },
    // 自定义侧标导航中鼠标点击和悬浮的样式效果
    handleNavColor(){
      console.log('333')
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
// 框架中内置的样式修改
.el-icon-arrow-down:before {
    content: "222";
    font-size: 18px;
}
// .menu ::v-deep .is-active{
//       background-color: red !important;
//     }
.nav-item:hover{
  background-color: red !important;
}
.nav-item.is-active{
  background-color: rgba($color: #00FFF0, $alpha: 0.4) !important;
  color: red !important;
}

.container-navMenu {
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s, color 0.1s, font-size 0s;
  width: 100%;
  height: 100vh;
  // 顶部的logo和名字
  .top-icon {
    width: 100%;
    // height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    img {
      width: 80px;
      height: 80px;
    }
  }
  // 去除element的NavMenu组件右侧边不对齐
.el-menu {
  border-right: none;
  .el-submenu__title.active{
    background-color: #409EFF;
  }
}
}
</style>
